<template>
    <div>
 <div class="discount-content">
    <div class="top-content">
        <div class="input-info">
            <i class="icon"></i>
            <input type="search" class="search-input" placeholder="搜索折扣商品">
        </div>
        <span class="cancle"><router-link :to="{name:'Index'}">取消</router-link></span>
    </div>
    <div class="discount-contentin"  v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
        <div class="part-1">
            <div id="menu-wrap" class="menu-wrap">
                <div class="menu-list js-menu-list">
                    <div class="menu-list-item">
                        <span data-index="1" :class="iid==12?'active':''" @click="anniu(12)">美食餐馆</span>
                        <i class="icon" v-show="iid==12"></i>
                    </div>
                    <div class="menu-list-item">
                        <span data-index="2" :class="iid==38?'active':''" @click="anniu(38)">汽车用品</span>
                        <i class="icon" v-show="iid==38"></i>
                    </div>
                    <div class="menu-list-item">
                        <span data-index="3" :class="iid==2?'active':''" @click="anniu(2)">购物折扣</span>
                        <i class="icon" v-show="iid==2"></i>
                    </div>
                    <div class="menu-list-item">
                        <span data-index="4" :class="iid==37?'active':''" @click="anniu(37)">酒店住宿</span>
                        <i class="icon" v-show="iid==37"></i>
                    </div>
                    <div class="menu-list-item" :class="iid==35?'active':''" @click="anniu(35)">
                        <span>美容美发</span>
                        <i class="icon" v-show="iid==35"></i>
                    </div>
                    <div class="menu-list-item" :class="iid==30?'active':''" @click="anniu(30)">
                        <span>休闲娱乐</span>
                        <i class="icon" v-show="iid==30"></i>
                    </div>
                    <div class="menu-list-item" :class="iid==24?'active':''" @click="anniu(24)">
                        <span>生活服务</span>
                        <i class="icon" v-show="iid==24"></i>
                    </div>
                </div>
                <a href="#" class="more" v-show="false">更多</a>


            </div>
            <div class="tab-content">
                <div class="tab-content-in" >
                    <div class="same-box " >
                        <swiper :options="headline" ref="mySwiper" class="swiper-wrapper " style="width:100%" >
                    <!-- slides -->
                            <swiper-slide class="swiper-slide tex_con" v-for="item in subcatelist" :key="item.name"  > 
                                <div class="top" @click="anniu_xiao(item.id,1)">
                                <img :src=item.img alt="">
                                </div>
                                <div class="bottom">{{item.name}}</div>
                            </swiper-slide>                   
                        </swiper>   
                    </div>
                </div>
            </div>
        </div>
        <div class="part-2">
            <ul class="top-nav">
                <li class="list-li" :class="{active:ordertype==1}" @click="ordertype=1">推荐</li>
                <li class="list-li" :class="{active:ordertype==2}" @click="ordertype=2">销量</li>
                <li class="list-li" :class="{active:ordertype==3}" @click="ordertype=3">最新</li>
                <li class="list-li" :class="{active:ordertype==4}" @click="ordertype=4">距离</li>
            </ul>
            <div class="part-2-content" v-if="shop.length>0" >
                <div class="part-2-content-in">
                    <div class="same-box" v-for="item in shop" :key="item.goodsId" >
                        <div class="top-info">
                            <router-link :to="{name:'Commodity_details',query:{id:item.coupon.companyId}}">
                                <img :src=item.goodsAlbum.url alt="">
                            </router-link>
                        </div>
                        <div class="bottom-box">
                            <h2 class="title">{{item.goods.goodsName}}</h2>
                            <div class="price-con">
                                <span class="text1">原价 ￥{{item.goods.goodsScreenPrice | amountMin100}}</span>
                                <span class="text2">购买人数 524</span>
                            </div>
                            <div class="card-price">
                                <div class="text-l">
                                    <span>券后</span>
                                    ￥{{item.goods.goodsScreenPrice-item.coupon.percentage | amountMin100}}
                                </div>
                                <div class="card-r">{{item.coupon.percentage | amountMin100(0)}}元券</div>
                            </div>
                        </div>
                    </div>            
                </div>
                
            </div>
            
            <loadingtmp :busy="busy" :datalength="shop.length" :loadall="loadall"></loadingtmp>
        </div>
    </div>
</div>
<!--<div class="backTo" onclick="javascript:history.back(-1);">返回</div>-->
    </div>
</template>
<style scoped>
  @import "../../../assets/personal/css/discount.css";
</style>
<script>
import loadingtmp from '@/components/load/loading'
export default {
    data() {
      return {
         iid: 12,
         subiid:0,
         subcatelist:{} ,
         shop:[],
         ordertype:1,
        headline:{
            slidesPerView : 4,
            slidesPerGroup : 4,
        },
        page:1,
        pageSize:10,
        busy:false,
        loadall: false
      }
    },
    methods:{
        anniu:function(id){
            this.iid = id|| this.iid;
            this.loadall= false;
            this.page=1;
            this.busy= false;
            this.subiid = 0;
            this.shop=[];
            this.loadsubcates();
            this.loadgoods();
        },
        anniu_xiao(id){
            this.subiid = id;
            this.loadall= false;
            this.busy= false;
            this.page=1;
            this.shop=[];
            this.loadgoods();
        },
        loadsubcates(){
            this.$http.get(this.APIURL_PREFIX+'/api/wap/type/selectByIndustry/'+this.iid).then((response) => {
                this.subcatelist =response.data.data;
            }).catch(function(err){
                console.log(err);
            });
        },
        loadgoods(flag){
            var apiurl = this.subiid? "/api/wap/company/industry":"/api/wap/company/industry/goodsAll"
            this.$http.get(this.APIURL_PREFIX+apiurl,{params:{id:this.subiid?this.subiid:this.iid,page:this.page,rows:this.pageSize}}).then((res) => {
                if(flag){
                    this.shop = this.shop.concat(res.data.data);
                }else{
                    this.shop =res.data.data;
                }
                if( 0 == res.data.data.length || res.data.length<this.pageSize ){
                    this.busy = true;
                    this.loadall = true;
                }
                else{
                    this.busy = false;
                    this.page++
                }
            });
        },
        loadMore(){
            this.busy = true;
            setTimeout(() => {
                this.loadgoods(this.page>1);
            }, 500);
        }

    },
    mounted(){
       this.loadsubcates()
    },
    components: {
        loadingtmp
    },
}
</script>
